import React from 'react'
import ReactDom from 'react-dom'

// class Demo extends React.Component {

//     state = { count: 0 }

//     myRef = React.createRef()

//     add = () => {
//         this.setState(state => ({ count: state.count + 1 }))
//     }

//     unmount = () => {
//         ReactDom.unmountComponentAtNode(document.getElementById('root'));
//     }

//     show = () => {
//         alert(this.myRef.current.value)
//     }

//     componentDidMount() {
//         this.timer = setInterval(() => {
//             this.setState(state => ({ count: state.count + 1 }))
//         }, 1000)
//     }

//     componentWillUnmount() {
//         clearInterval(this.timer)
//     }

//     render() {
//         return (
//             <div>
//                 <input type='text' ref={this.myRef} />
//                 <h2>当前求和为{this.state.count}</h2>
//                 <button onClick={this.add}>点我+1</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//                 <button onClick={this.show}>点击提示数据</button>
//             </div>
//         )
//     }
// }

function Demo() {

    //useState
    const [count, setCount] = React.useState(0);

    const myRef = React.useRef();

    //可以多加，每一次都是实例化，不会互相干扰
    // const [k, kCount] = React.useState('asdsa');

    // const [name, setName] = React.useState('tom')

    // console.log(k, kCount);
    // console.log(count, setCount);

    //useEffect

    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])


    //加的回调
    function add() {
        // setCount(count + 1) //第一种写法
        setCount(count => count + 1)
    }

    //提示输入的回调
    function show() {
        // setCount(count + 1) //第一种写法
        alert(myRef.current.value);
    }

    // function setK() {
    //     kCount(k + '我是谁')
    // }

    // function changeName() {
    //     setName('jaskffjds')
    // }

    //卸载组件的回调
    function unmount() {
        // setCount(count + 1) //第一种写法
        ReactDom.unmountComponentAtNode(document.getElementById('root'));
    }

    return (
        <div>
            <input type="text" ref={myRef} />
            <h2>当前求和为:{count}</h2>
            {/* <h2>当前求和为:{k}</h2>
            <h2>我的名字是:{name}</h2> */}
            <button onClick={add}>点我+1</button>
            {/* <button onClick={setK}>点我设置K</button>
            <button onClick={changeName}>点我改名</button> */}
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点我提示数据</button>
        </div>
    )
}

export default Demo
